<!--
 * @Author: wangjian
 * 656876071@qq.com
 * @Date: 2024-07-23 11:27:08
 * @LastEditTime: 2024-09-11 15:54:53
 * @FilePath: src/views/sxln/member/MemberDetail.vue
 * @Description: 
 -->
<script setup lang="ts">
import {lnMemberApi, type LnMemberCase} from "@/views/sxln/api/LnMemberApi";
import {useDetail} from './LnMemberHooks'
import {ref, watch} from "vue";
import {useSimpleForm, SIMPLE_FORM_SUBMIT_KEY} from "@/core/common/hooks/FormHooks";
import DictSelect from "@/core/common/component/DictSelect.vue";
import type {UploadRequestOption} from "ant-design-vue/lib/vc-upload/interface";
import WDatePicker from "@/views/sxln/member/WDatePicker.vue";

const form = ref<LnMemberCase>({})
const PRIMARY_KEY = "id"
const callback = defineEmits([SIMPLE_FORM_SUBMIT_KEY])
const {getMemberById, addMember, updateMember} = lnMemberApi()
const {
  modalIsVisible,
  modalIsSubmitting,
  modalSubmit,
  showEditForm,
  showAddForm
} = useSimpleForm(form, PRIMARY_KEY, addMember, updateMember, getMemberById, callback)

// 重写show
const showEditFormCustom = (id: string) => {
  console.log("自定义修改")
  photoObj.value = {}
  showEditForm(id).then((data:{})=>{
    if(data.photo){
      photoObj.value.fileName = "preview"
      photoObj.value.url = form.value.photo
    }
  })
}
const showAddFormCustom = () => {
  console.log("自定义添加")
  photoObj.value = {}
  showAddForm()
}

defineExpose({
  showAddForm: showAddFormCustom,
  showEditForm: showEditFormCustom 
})
const {
  entranceTimePicker,
  uploadPhoto,
  fileList,
  photoObj,
  preview
} = useDetail()

// 重写提交按钮
const handleClick = () => {
  form.value.photo = photoObj.value.url
  modalSubmit()
}

</script>

<template>
  <a-modal v-model:open="modalIsVisible" title="会员信息维护" width="30rem" :maskClosable="false">
    <template #footer>
      <a-button key="back" @click="modalIsVisible = false">取消</a-button>
      <a-button :loading="modalIsSubmitting" key="submit" type="primary" @click="handleClick">录入</a-button>
    </template>
    <a-form :disabled="modalIsSubmitting" :label-col="{span:5}" :wrapper-col="{span: 18}" label-align="right">
      <a-form-item label="照片">
        <a-upload
            v-model:file-list="fileList"
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :before-upload="uploadPhoto.beforeUpload"
            @change="uploadPhoto.handleChange"
            :custom-request="uploadPhoto.upload"
        >
          <!--               :src="'http://127.0.0.1:9000/'+photoObj.bucket+'/'+photoObj.fileKey +'/' + photoObj.fileName"-->
          <img v-if="photoObj.fileName"
               style="width: 100%"
               :src="preview"
               alt="avatar"/>
          <div v-else class="ant-upload-text">点击上传</div>
        </a-upload>
      </a-form-item>
      <a-form-item label="姓名">
        <a-input v-model:value="form.realName" placeholder="请输入姓名"/>
      </a-form-item>
      <a-form-item label="会员证编号">
        <a-input v-model:value="form.memberId" placeholder="请输入会员证编号"/>
      </a-form-item>
      <a-form-item label="笔名">
        <a-input v-model:value="form.penName" placeholder="请输入笔名"/>
      </a-form-item>
      <a-form-item label="性别">
        <!--          <a-input v-model:value="form.sex" placeholder="请输入性别"/>-->
        <dict-select dictCode="base_sex" v-model:value="form.sex" style="width: 100%"/>
      </a-form-item>
      <a-form-item label="会员类别">
        <!--          <a-input v-model:value="form.memberType" placeholder="请输入会员类别"/>-->
        <dict-select dictCode="member_type" v-model:value="form.memberType" style="width: 100%"/>
      </a-form-item>
      <a-form-item label="入会时间">
<!--        <a-date-picker v-model:value="entranceTimePicker" placeholder="请选择入会时间"/>-->
        <w-date-picker v-model:value="form.entranceTime"/>
      </a-form-item>
      <a-form-item label="回显" v-if="false">
        <!--          <a-button type="primary" @click="handleClick">click</a-button>-->
        {{ form.entranceTime }}
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>
.ant-form-item {
  padding: .5rem;
}
</style>